<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.orderNo" placeholder="订单号" class="handle-input mr10" clearable></el-input>
                <el-input v-model="query.name" placeholder="客户姓名" class="handle-input mr10" clearable></el-input>
                <el-input v-model="query.phone" placeholder="手机号码" class="handle-input mr10" clearable></el-input>
                <el-select v-model="query.companyId" placeholder="接单公司" class="handle-select mr10" clearable>
                    <el-option v-for="item in companyOptions" :value="item.id" :label="item.name"></el-option>
                </el-select>
                <el-select v-model="query.state" placeholder="订单状态" class="handle-select mr10" clearable>
                    <el-option :value="1" label="待接单"></el-option>
                    <el-option :value="2" label="待支付"></el-option>
                    <el-option :value="3" label="待服务"></el-option>
                    <el-option :value="4" label="服务中"></el-option>
                    <el-option :value="5" label="待确认"></el-option>
                    <el-option :value="6" label="已完成"></el-option>
                    <el-option :value="7" label="已关闭"></el-option>
                    <el-option :value="10" label="已取消"></el-option>
                </el-select>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                      v-loading="pageLoading">
                <el-table-column prop="orderNo" label="订单号" min-width="120" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="name" label="客户姓名" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="phone" label="手机号码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="companyName" label="服务公司" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="province" label="服务地址" min-width="150" :show-overflow-tooltip="true">
                    <template #default="scope">
                        {{scope.row.province}}{{scope.row.city}}{{scope.row.town}}{{scope.row.detail}}
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="订单金额(元)" :show-overflow-tooltip="true" :min-width="100"></el-table-column>
                <el-table-column prop="state" label="订单状态">
                    <template #default="scope">
                        <el-tag type="primary" v-if="scope.row.state === 1">待接单</el-tag>
                        <el-tag type="primary" v-if="scope.row.state === 2">待支付</el-tag>
                        <el-tag type="primary" v-if="scope.row.state === 3">待服务</el-tag>
                        <el-tag type="primary" v-if="scope.row.state === 4">服务中</el-tag>
                        <el-tag type="primary" v-if="scope.row.state === 5">待确认</el-tag>
                        <el-tag type="success" v-if="scope.row.state === 6">已完成</el-tag>
                        <el-tag type="warning" v-if="scope.row.state === 7">已关闭</el-tag>
                        <el-tag type="danger" v-if="scope.row.state >= 10">已取消</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="beginTime" label="预计开始时间" :show-overflow-tooltip="true"
                                 min-width="120"></el-table-column>
                <el-table-column prop="endTime" label="预计结束时间" :show-overflow-tooltip="true"
                                 min-width="120"></el-table-column>
                <el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true"
                                 min-width="120"></el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right" min-width="200">
                    <template #default="scope">
                        <el-button text :icon="Document" type="primary" @click="handleDetail(scope.row)" v-permiss="16">
                            详情
                        </el-button>
                        <el-button text :icon="Check" type="primary" @click="handleAccept(scope.row)" v-permiss="21"
                                   v-if="role == 2 && scope.row.state == 1">
                            接单
                        </el-button>
                        <el-button text :icon="Money" type="primary" @click="handlePay(scope.row)" v-permiss="22"
                                   v-if="role == 1 && scope.row.state == 2">
                            付款
                        </el-button>
                        <el-button text :icon="Close" type="danger" @click="handleCancel(scope.row)" v-permiss="23"
                                   v-if="(role == 1 || role == 2) && (scope.row.state == 1 || scope.row.state == 2 || scope.row.state == 3)">
                            取消
                        </el-button>
                        <el-button text :icon="RefreshRight" type="primary" @click="handleStart(scope.row)"
                                   v-permiss="24"
                                   v-if="role == 1 && scope.row.state == 3">
                            开始
                        </el-button>
                        <el-button text :icon="RefreshLeft" type="primary" @click="handleEnd(scope.row)" v-permiss="25"
                                   v-if="role == 1 && scope.row.state == 4">
                            结束
                        </el-button>
                        <el-button text :icon="CircleCheck" type="primary" @click="handleConfirm(scope.row)"
                                   v-permiss="26"
                                   v-if="role == 2 && scope.row.state == 5">
                            确认
                        </el-button>
                        <!--						<el-button text type="warning" key="warning" :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">-->
                        <!--							取消-->
                        <!--						</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <el-dialog title="详情" v-model="detailVisible" width="60%">
            <el-descriptions title="订单信息" :column="2" border>
                <el-descriptions-item label="订单号">{{detailData.orderNo}}</el-descriptions-item>
                <el-descriptions-item label="客户姓名">{{detailData.name}}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{detailData.phone}}</el-descriptions-item>
                <el-descriptions-item label="服务地址" :span="2">
                    {{detailData.province}}{{detailData.city}}{{detailData.town}}{{detailData.detail}}
                </el-descriptions-item>
                <el-descriptions-item label="服务类型">{{detailData.serviceTypeName}}</el-descriptions-item>
                <el-descriptions-item label="提供住宿">
                    <span v-if="detailData.accommodation === 1">是</span>
                    <span v-if="detailData.accommodation === 0">否</span>
                </el-descriptions-item>
                <el-descriptions-item label="结算方式">
                    <span v-if="detailData.chargeMode === 0">时薪</span>
                    <span v-if="detailData.chargeMode === 1">日薪</span>
                    <span v-if="detailData.chargeMode === 2">月薪</span>
                </el-descriptions-item>
                <el-descriptions-item label="薪资(元)">{{detailData.pay}}</el-descriptions-item>
                <el-descriptions-item label="预计服务开始时间">{{detailData.beginTime}}</el-descriptions-item>
                <el-descriptions-item label="预计服务结束时间">{{detailData.endTime}}</el-descriptions-item>
                <el-descriptions-item label="预计服务期数">{{detailData.serviceCount}}</el-descriptions-item>
                <el-descriptions-item label="预计订单金额(元)">{{detailData.money}}</el-descriptions-item>
                <el-descriptions-item label="实际服务开始时间">{{detailData.actualBeginTime}}</el-descriptions-item>
                <el-descriptions-item label="实际服务结束时间">{{detailData.actualEndTime}}</el-descriptions-item>
                <el-descriptions-item label="实际服务期数">{{detailData.actualServiceCount}}</el-descriptions-item>
                <el-descriptions-item label="实际订单金额(元)">{{detailData.actualMoney}}</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <el-tag type="primary" v-if="detailData.state === 1">待接单</el-tag>
                    <el-tag type="primary" v-if="detailData.state === 2">待支付</el-tag>
                    <el-tag type="primary" v-if="detailData.state === 3">待服务</el-tag>
                    <el-tag type="primary" v-if="detailData.state === 4">服务中</el-tag>
                    <el-tag type="primary" v-if="detailData.state === 5">待确认</el-tag>
                    <el-tag type="success" v-if="detailData.state === 6">已完成</el-tag>
                    <el-tag type="warning" v-if="detailData.state === 7">已关闭</el-tag>
                    <el-tag type="danger" v-if="detailData.state >= 10">已取消</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="备注信息">{{detailData.remark}}</el-descriptions-item>
                <el-descriptions-item label="评分">{{detailData.score}}</el-descriptions-item>
                <el-descriptions-item label="评价内容">{{detailData.commentContent}}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{detailData.createTime}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="家政员信息" :column="2" border style="margin-top: 10px" v-if="detailData.housekeeperId">
                <el-descriptions-item label="编号">{{detailData.housekeeper.id}}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{detailData.housekeeper.name}}</el-descriptions-item>
                <el-descriptions-item label="所属公司">{{detailData.housekeeper.companyName}}</el-descriptions-item>
                <el-descriptions-item label="期望时/日/月薪(元)">
                    {{detailData.housekeeper.hourSalary}}/{{detailData.housekeeper.daySalary}}/{{detailData.housekeeper.monthSalary}}
                </el-descriptions-item>
                <el-descriptions-item label="民族">{{detailData.housekeeper.nation}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                    <span v-if="detailData.housekeeper.gender === 1">男</span>
                    <span v-if="detailData.housekeeper.gender === 2">女</span>
                </el-descriptions-item>
                <el-descriptions-item label="身高">{{detailData.housekeeper.height}}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{detailData.housekeeper.age}}</el-descriptions-item>
                <el-descriptions-item label="服务类型">
                    <el-tag v-for="item in detailData.housekeeper.typeList" style="margin-right: 10px">{{item.name}}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="工作状态">
                    <el-tag type="success" v-if="detailData.housekeeper.state === 1">空闲</el-tag>
                    <el-tag type="warning" v-if="detailData.housekeeper.state === 2">繁忙</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="掌握语言">{{detailData.housekeeper.language}}</el-descriptions-item>
                <el-descriptions-item label="技能">{{detailData.housekeeper.skill}}</el-descriptions-item>
                <el-descriptions-item label="现居地" :span="2">
                    {{detailData.housekeeper.province}}{{detailData.city}}{{detailData.town}}{{detailData.detail}}
                </el-descriptions-item>
                <el-descriptions-item label="注册时间">{{detailData.housekeeper.createTime}}</el-descriptions-item>
                <el-descriptions-item label="个人介绍" :span="2">{{detailData.housekeeper.introduction}}
                </el-descriptions-item>
                <el-descriptions-item label="图片信息">
                    <el-image v-for="item in detailData.housekeeper.imageUrlList" style="width: 200px; height: 200px  margin-right: 20px;"
                              fit="fit" :src="item"></el-image>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog title="结束服务" v-model="endVisible" width="40%">
            <el-form label-width="70px">
                <el-form-item label="订单号">
                <el-input v-model="endRow.orderNo" disabled></el-input>
                </el-form-item>
                <el-form-item label="服务期数">
					<el-input-number v-model="endForm.serviceCount" :min="1"/>
                </el-form-item>
                <el-form-item label="评分">
					<el-rate v-model="endForm.score" />
                </el-form-item>
                <el-form-item label="评价">
                    <el-input type="textarea" rows="3" v-model="endForm.content"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="endVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitEnd">确 定</el-button>
				</span>
            </template>
        </el-dialog>


        <el-dialog title="确认订单" v-model="confirmVisible" width="40%">
            <el-form label-width="70px">
                <el-form-item label="订单号">
                    <el-input v-model="confirmRow.orderNo" disabled></el-input>
                </el-form-item>
                <el-form-item label="每期薪资">
                    <el-input v-model="confirmRow.pay" disabled/>
                </el-form-item>
                <el-form-item label="订单金额">
                    <el-input v-model="confirmForm.money"></el-input>
                </el-form-item>
                <el-form-item label="服务期数">
                <el-input-number v-model="confirmForm.serviceCount" :min="1"/>
            </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="confirmVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitConfirm">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="basetable">
    import {ref, reactive, nextTick} from 'vue';
    import {ElMessage, ElMessageBox} from 'element-plus';
    import {
        Delete,
        Edit,
        Search,
        Plus,
        Document,
        Check,
        Money,
        Close,
        RefreshRight,
        RefreshLeft,
        CircleCheck
    } from '@element-plus/icons-vue';
    import {
        acceptOrderFormApi, cancelOrderFormApi, confirmOrderFormApi, endOrderFormApi,
        fetchData,
        getCompanyOptions, getDemandApi, getDemandListApi,
        getHouseKeeperApi,
        getHouseKeeperListApi, getOrderFormApi, getOrderFormListApi,
        getTypeOptions, payOrderFormApi, startOrderFormApi,
        updateHouseKeeperApi
    } from '../api/index';
    import address from "../assets/json/address.json";

    const query = reactive({
        serviceTypeId: '',
        companyId: '',
        province: '',
        name: '',
        pageNum: 1,
        pageSize: 10
    });
    const tableData = ref([]);
    const typeOptions = ref([]);
    const companyOptions = ref([]);
    // 省份数据初始化
    const provinceData = ref(address);
    const imageList = ref([]);
    const pageTotal = ref(0);
    const pageLoading = ref(false);
    const role = localStorage.getItem("role");
    const company = localStorage.getItem("company");
    const getServiceTypeOptions = async () => {
        const res = await getTypeOptions({state: 1});
        if (res) {
            typeOptions.value = res.data;
        }
    };
    getServiceTypeOptions();
    const fetchCompanyOptions = async () => {
        const res = await getCompanyOptions({state: 1});
        if (res) {
            companyOptions.value = res.data;
        }
    };
    fetchCompanyOptions();
    // 获取表格数据
    const getData = async () => {
        pageLoading.value = true;
        const res = await getOrderFormListApi(query);
        if (res) {
            tableData.value = res.data.content;
            pageTotal.value = res.data.count;
        }
        pageLoading.value = false;
    };
    getData();

    // 查询操作
    const handleSearch = () => {
        query.pageNum = 1;
        getData();
    };
    // 分页导航
    const handlePageChange = (val: number) => {
        query.pageNum = val;
        getData();
    };

    const detailVisible = ref(false);
    const detailData = ref({});
    // 查看详情
    const handleDetail = async (row: any) => {
        const res = await getOrderFormApi(row.id);
        if (res) {
            detailData.value = res.data;
            detailVisible.value = true;
        }
    };

    // 公司接单
    const handleAccept = async (row: any) => {
        const res = await acceptOrderFormApi(row.id);
        if (res) {
            ElMessage.success("接单成功");
            await getData();
        }
    };

    // 用户支付
    const handlePay = async (row: any) => {
        const res = await payOrderFormApi(row.id);
        if (res) {
            ElMessage.success("支付成功");
            await getData();
        }
    };

    // 取消
    const handleCancel = async (row: any) => {
        const res = await cancelOrderFormApi(row.id);
        if (res) {
            ElMessage.success("取消成功");
            await getData();
        }
    };

    // 开始
    const handleStart = async (row: any) => {
        const res = await startOrderFormApi(row.id);
        if (res) {
            ElMessage.success("操作成功");
            await getData();
        }
    };

    // 结束
    const endVisible = ref(false);
    const endRow = ref({});
    const endForm = reactive({
        id: null,
        serviceCount: null,
        score: null,
        content: ''
    });
    const handleEnd = async (row: any) => {
        endForm.id = row.id;
        endForm.serviceCount = row.serviceCount;
        endForm.score = 0;
        endForm.content = '';
        endRow.value = row;
        endVisible.value = true;
    };
    const submitEnd = async () => {
        if (!endForm.serviceCount) {
            ElMessage.warning("请填写服务期数");
            return;
        }
        if (!endForm.score) {
            ElMessage.warning("请填写评分");
            return;
        }
        const res = await endOrderFormApi(endForm);
        if (res) {
            ElMessage.success("操作成功");
            endVisible.value = false;
            await getData();
        }
    };


    // 确认
    const confirmVisible = ref(false);
    const confirmRow = ref({});
    const confirmForm = reactive({
        id: null,
        serviceCount: null,
        money: null,
    });
    const handleConfirm = async (row: any) => {
        confirmRow.value = row;
        confirmForm.id = row.id;
        confirmForm.serviceCount = row.serviceCount;
        confirmForm.money = row.money;
        confirmVisible.value = true;
    };
    const submitConfirm = async () => {
        if (!confirmForm.serviceCount) {
            ElMessage.warning("请填写服务期数");
            return;
        }
        const res = await confirmOrderFormApi(confirmForm);
        if (res) {
            ElMessage.success("确认成功");
            confirmVisible.value = false;
            await getData();
        }
    };


    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({
        id: null,
        name: '',
        maritalStatus: 0,
        gender: null,
        hourSalary: null,
        daySalary: null,
        monthSalary: null,
        height: null,
        age: null,
        state: 1,
        language: '',
        skill: '',
        introduction: '',
        nation: '',
        province: '',
        city: '',
        town: '',
        detail: '',
        typeIdList: [],
        imageUrlList: []
    });
    const editAddressRef = ref();
    const imageUploaderRef = ref();
    const handleEdit = async (index: number, row: any) => {
        const res = await getHouseKeeperApi(row.id);
        const d = res.data;
        Object.keys(form).map((name: any) => form[name] = d[name]);
        editVisible.value = true;
        await nextTick(() => {
            editAddressRef.value.initShow(row.province, row.city, row.town);
            imageUploaderRef.value.onInitImage(form.imageUrlList);
        });
    };
    const saveEdit = async () => {
        const res = await updateHouseKeeperApi(form);
        if (res) {
            editVisible.value = false;
            ElMessage.success(`修改成功`);
        }
    };
    const handleImageChange = (images: any) => {
        console.log("handleImageChange", images);
        imageList.value = images;
        form.imageUrlList = [];
        images.forEach((item: any) => {
            form.imageUrlList.push(item.url);
        })
    };
    const selectedAddress = (address: any) => {
        console.log("selectedAddress", address);
        form.province = address.province;
        form.city = address.city;
        form.town = address.town;
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 180px;
    }

    .handle-input {
        width: 180px;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #F56C6C;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
